import React, { PureComponent } from "react";
import "./jtab.less";

class JTab extends PureComponent {
  constructor() {
    super();
    this.state = {
      active: 0
    };
  }
  clickHandler = (ev, index) => {
    this.setState({ active: index });
    this.props.onTab(index);
  };
  render() {
    return (
      <div className="j-tab">
        {this.props.tabs.map((item, index) => (
          <div
            className={[`item ${index === this.state.active ? "active" : ""}`]}
            key={index}
            onClick={ev => {
              this.clickHandler(ev, index);
            }}
          >
            {item}
          </div>
        ))}
      </div>
    );
  }
}

export default JTab;
